<template>
	<div class="time-select">
		<CellListItem title="选择时间">
			<select slot="value" v-model="val">
				<option value="本月">本月</option>
				<option value="最近三个月">最近三个月</option>
				<option value="最近半年">最近半年</option>
				<option value="选择查询区间">选择查询区间</option>
			</select>

		</CellListItem>
		<div class="time-scope" v-if="val==='选择查询区间'">
			<div class="item" @click="openFrom">
				{{ from|time }}

			</div>
			<span>至</span>
			<div class="item" @click="openTo">
				{{ to|time }}
			</div>
		</div>
		<mt-datetime-picker ref="from" type="date" v-model="from" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" />
		<mt-datetime-picker ref="to" type="date" v-model="to" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" />
	</div>
</template>
<script>
import moment from "moment"
export default {
  name: "TimeSelect",
  props: {
		value:String,
	},
  data() {
    return {
      val: "本月",
      to: new Date(),
      from:new Date()
    };
  },
	watch:{
		val(n){
			this.$emit('change',n);
		},
		to(n){
			const { from,to }=this;
			this.$emit('change',{from,to})
		}
	},
	filters:{
		time(val){
			return moment(new Date(val)).format('YYYY年MM月DD日')
		}
	},
  methods: {
    openFrom() {
      const { from } = this.$refs;
      from.open();
    },
    openTo() {
      const { to } = this.$refs;
      to.open();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/lib/index.scss";
.time-select {
  background: #fff;
  select {
    border: 1px solid color(bc);
    width: 100%;
    height: 50px;
  }
  .time-scope {
    // background: red;
    height: 60px;
    display: flex;
    align-items: center;
		padding:  0  $offset;
    .item {
      display: flex;
      align-items: center;
      flex: 1;
      height: 100%;
			justify-content: center;
      .picker {
      }
    }
  }
}
</style>